<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 1000px;height:400px;"></div>


  <script src="../../plugins/vue/vue.js"></script>
  <script src="../../plugins/axios/axios.min.js"></script>
  <script type="text/javascript">


      new Vue({
          el:"#main",

          mounted() {
              this.start();
              console.log(this.option.xAxis.data);
              console.log(this.option.series.data);
          },
          methods:{
              start(){
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  axios({
                      url: '/echart/data',
                      method: 'post',
                  }).then(resp => {
                      console.log(resp);
                      let data1=resp.data.name;
                      let data2=resp.data.number;

                      let option={
                              title: {
                                  text: '菜品数量'
                              },
                              tooltip: {},
                              legend: {
                                  data: ['数量']
                              },
                              xAxis: {
                                  data: data1
                              },
                              yAxis: {},
                              series: [
                                  {
                                      name: '数量',
                                      type: 'bar',
                                      data: data2
                                  }
                              ]
                          };
                      // 使用刚指定的配置项和数据显示图表。
                      myChart.setOption(option);
                  })


              }
          },
      })

  </script>
  <script src="../../plugins/vue/vue.js"></script>
  </body>
</html>